<template>
<div class="sidebar fl">
 	<el-menu :default-active="onRoutes" class="el-menu-vertical-demo" unique-opened router>

      <el-submenu :index="item.index" v-for="item in items">
        <template slot="title"><i :class="item.icon"></i>{{item.title}}</template>
        <el-menu-item-group>
          <el-menu-item v-for="(itemSubs,i) in item.subs" :key="i" :index="itemSubs.index">{{itemSubs.title}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
</div>
</template>
<style>
html,body,.el-menu,.sidebar,.wrapper,#app,.container,.main{ height: 100%; }
.sidebar{ width: 15%; background: #ccc; overflow: auto;}
@media (max-width: 760px) {
    .sidebar { display: none; }
    .main{ width: 96%; padding:0 2%; }
}
</style>

<script>
export default{
	data(){
		return{

      items:[
      {
        icon:'el-icon-message',
        title:'导航一',
        index:'1',
        subs:[
          {
            index:'',
            title:'选项1'
          },
          {
            index:'',
            title:'选项2'
          },
          {
            index:'',
            title:'选项3'
          },
          {
            index:'',
            title:'选项4'
          }
        ]
      },
      {
        icon:'el-icon-message',
        title:'导航二',
        index:'2',
        subs:[
          {
            index:'',
            title:'选项1'
          },
          {
            index:'',
            title:'选项2'
          },
          {
            index:'',
            title:'选项3'
          },
          {
            index:'',
            title:'选项4'
          }
        ]
      },
      {
        icon:'el-icon-message',
        title:'导航三',
        index:'3',
        subs:[
          {
            index:'',
            title:'选项1'
          },
          {
            index:'',
            title:'选项2'
          },
          {
            index:'',
            title:'选项3'
          },
          {
            index:'',
            title:'选项4'
          }
        ]
      }
      ]
		}
	},
	methods: {

  },
  computed:{
    onRoutes()
    {
      console.log(1);
    }
    
  }

}
</script>